۸ شهریور ۱۴۰۴فارسی

قدرت اکشن‌های سرور ری‌اکت را برای پردازش یکپارچه فرم و تغییر داده‌ها در سمت سرور آزاد کنید. بیاموزید چگونه اپلیکیشن‌های وب کارآمد، امن و کاربرپسند بسازید.

اکشن‌های سرور ری‌اکت (React Server Actions): راهنمای جامع پردازش فرم و یکپارچه‌سازی با سرور

اکشن‌های سرور ری‌اکت (React Server Actions) نمایانگر یک تحول بزرگ در نحوه ساخت اپلیکیشن‌های وب تعاملی با ری‌اکت هستند. آن‌ها به توسعه‌دهندگان این امکان را می‌دهند که کد سمت سرور را مستقیماً از کامپوننت‌های ری‌اکت اجرا کنند و پردازش فرم، تغییر داده‌ها و سایر عملیات وابسته به سرور را ساده‌سازی کنند. این راهنما یک نمای کلی و جامع از اکشن‌های سرور ری‌اکت ارائه می‌دهد که مزایا، جزئیات پیاده‌سازی و بهترین شیوه‌های استفاده از آن‌ها را پوشش می‌دهد.

اکشن‌های سرور ری‌اکت چه هستند؟

اکشن‌های سرور (Server Actions)، توابع ناهمگامی هستند که بر روی سرور اجرا می‌شوند. آن‌ها می‌توانند مستقیماً از کامپوننت‌های ری‌اکت فراخوانی شوند و به شما این امکان را می‌دهند که ارسال فرم‌ها، به‌روزرسانی داده‌ها و اجرای سایر منطق‌های سمت سرور را بدون نوشتن API endpointهای جداگانه مدیریت کنید. این رویکرد توسعه را ساده‌تر کرده، میزان جاوااسکریپت سمت کلاینت را کاهش داده و عملکرد اپلیکیشن را بهبود می‌بخشد.

ویژگی‌های کلیدی اکشن‌های سرور:

اجرا در سمت سرور: اکشن‌ها منحصراً روی سرور اجرا می‌شوند، که امنیت داده‌ها را تضمین کرده و از افشای منطق حساس به کلاینت جلوگیری می‌کند.
فراخوانی مستقیم از کامپوننت‌های ری‌اکت: شما می‌توانید اکشن‌های سرور را مستقیماً در کامپوننت‌های خود فراخوانی کنید، که ادغام منطق سمت سرور در رابط کاربری شما را آسان می‌کند.
عملیات ناهمگام: اکشن‌ها ناهمگام هستند، که به شما اجازه می‌دهد وظایف طولانی‌مدت را بدون مسدود کردن رابط کاربری انجام دهید.
بهبود تدریجی (Progressive enhancement): اکشن‌های سرور از بهبود تدریجی پشتیبانی می‌کنند، به این معنی که اپلیکیشن شما حتی اگر جاوااسکریپت غیرفعال باشد، همچنان کار خواهد کرد.

مزایای استفاده از اکشن‌های سرور ری‌اکت

اکشن‌های سرور چندین مزیت قانع‌کننده نسبت به تکنیک‌های سنتی واکشی و تغییر داده در سمت کلاینت ارائه می‌دهند:

توسعه ساده‌تر

با حذف نیاز به API endpointهای جداگانه، اکشن‌های سرور میزان کد تکراری (boilerplate) که باید بنویسید را کاهش می‌دهند. این می‌تواند به طور قابل توجهی گردش کار توسعه شما را ساده کرده و کدبیس شما را قابل نگهداری‌تر کند. به جای ساخت و مدیریت روت‌های API، شما اکشن‌هایی را تعریف می‌کنید که در کنار کامپوننت‌هایی که از آن‌ها استفاده می‌کنند قرار دارند.

عملکرد بهبود یافته

اکشن‌های سرور می‌توانند با کاهش میزان جاوااسکریپتی که باید در کلاینت دانلود و اجرا شود، عملکرد اپلیکیشن را بهبود بخشند. آن‌ها همچنین به شما این امکان را می‌دهند که تبدیل و اعتبارسنجی داده‌ها را در سرور انجام دهید، که می‌تواند بار کاری روی کلاینت را بیشتر کاهش دهد. سرور می‌تواند به طور کارآمد پردازش داده‌ها را مدیریت کند که منجر به تجربه کاربری روان‌تری می‌شود.

امنیت تقویت‌شده

از آنجایی که اکشن‌های سرور روی سرور اجرا می‌شوند، راه امن‌تری برای مدیریت داده‌ها و عملیات حساس فراهم می‌کنند. شما می‌توانید با انجام بررسی‌های اعتبارسنجی و مجوزدهی در سرور، از داده‌های خود در برابر دسترسی و دستکاری غیرمجاز محافظت کنید. این یک لایه امنیتی در مقایسه با اعتبارسنجی‌های سمت کلاینت که می‌توانند دور زده شوند، اضافه می‌کند.

بهبود تدریجی

اکشن‌های سرور برای پشتیبانی از بهبود تدریجی طراحی شده‌اند. این بدان معناست که اپلیکیشن شما حتی اگر جاوااسکریپت غیرفعال باشد یا بارگذاری نشود، همچنان کار خواهد کرد. هنگامی که جاوااسکریپت در دسترس نیست، فرم‌ها با استفاده از ارسال فرم سنتی HTML ارسال می‌شوند و سرور درخواست را به طور متناسب مدیریت خواهد کرد. این تضمین می‌کند که اپلیکیشن شما برای طیف وسیع‌تری از کاربران، از جمله کسانی که مرورگرهای قدیمی‌تر یا اتصالات اینترنتی کندتر دارند، قابل دسترسی باشد.

به‌روزرسانی‌های خوش‌بینانه (Optimistic Updates)

اکشن‌های سرور به طور یکپارچه با به‌روزرسانی‌های خوش‌بینانه ادغام می‌شوند. شما می‌توانید بلافاصله رابط کاربری را به‌روزرسانی کنید تا نتیجه مورد انتظار یک اکشن را منعکس کند، حتی قبل از اینکه سرور تغییر را تأیید کند. این می‌تواند به طور قابل توجهی پاسخگویی درک شده اپلیکیشن شما را بهبود بخشد و تجربه کاربری روان‌تری را فراهم کند. اگر عملیات سمت سرور با شکست مواجه شود، می‌توانید به راحتی رابط کاربری را به حالت قبلی خود بازگردانید.

چگونه اکشن‌های سرور ری‌اکت را پیاده‌سازی کنیم

پیاده‌سازی اکشن‌های سرور شامل تعریف تابع اکشن، مرتبط کردن آن با یک کامپوننت و مدیریت نتیجه است.

تعریف یک اکشن سرور

اکشن‌های سرور با استفاده از دستورالعمل 'use server' تعریف می‌شوند. این دستورالعمل به کامپایلر ری‌اکت می‌گوید که این تابع باید روی سرور اجرا شود. در اینجا یک مثال آورده شده است:

            // app/actions.js
'use server'

import { cookies } from 'next/headers'
import { revalidatePath } from 'next/cache'

export async function createPost(formData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // Simulate database insert
  await new Promise((resolve) => setTimeout(resolve, 1000))

  console.log('Post created:', { title, content })

  // Revalidate the blog route
  revalidatePath('/blog')

  return { message: 'Post created successfully!' }
}

در این مثال:

دستورالعمل 'use server' نشان می‌دهد که تابع createPost باید روی سرور اجرا شود.
این تابع یک شیء formData را به عنوان ورودی می‌گیرد که حاوی داده‌های ارسال شده از فرم است.
تابع، title و content را از formData استخراج می‌کند.
این تابع یک درج در پایگاه داده را با استفاده از setTimeout شبیه‌سازی می‌کند. در یک اپلیکیشن واقعی، شما این را با منطق واقعی پایگاه داده خود جایگزین می‌کنید.
تابع revalidatePath کش را برای مسیر /blog نامعتبر می‌کند و تضمین می‌کند که آخرین داده‌ها نمایش داده شوند.
این تابع یک شیء با ویژگی message برمی‌گرداند که می‌توان از آن برای نمایش پیام موفقیت به کاربر استفاده کرد.

استفاده از اکشن‌های سرور در کامپوننت‌های ری‌اکت

برای استفاده از یک اکشن سرور در یک کامپوننت ری‌اکت، می‌توانید تابع اکشن را وارد کرده و آن را به پراپ action یک عنصر <form> پاس دهید. در اینجا یک مثال آورده شده است:

            // app/components/PostForm.js
import { createPost } from '../actions'
'use client'

import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    
  )
}

export default function PostForm() {
  return (
    
      Title:
      

      Content:
      
      <SubmitButton />
    </form>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKaW1wb3J0IHsgY3JlYXRlUG9zdCB9IGZyb20gJy4uL2FjdGlvbnMnCid1c2UgY2xpZW50JwoKaW1wb3J0IHsgdXNlRm9ybVN0YXR1cyB9IGZyb20gJ3JlYWN0LWRvbScKCmZ1bmN0aW9uIFN1Ym1pdEJ1dHRvbigpIHsKICBjb25zdCB7IHBlbmRpbmcgfSA9IHVzZUZvcm1TdGF0dXMoKQoKICByZXR1cm4gKAogICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGRpc2FibGVkPXtwZW5kaW5nfT4KICAgICAge3BlbmRpbmcgPyAnQ3JlYXRpbmcuLi4nIDogJ0NyZWF0ZSBQb3N0J30KICAgIDwvYnV0dG9uPgogICkKfQoKZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gUG9zdEZvcm0oKSB7CiAgcmV0dXJuICgKICAgIDxmb3JtIGFjdGlvbj17Y3JlYXRlUG9zdH0+CiAgICAgIDxsYWJlbCBodG1sRm9yPSJ0aXRsZSI+VGl0bGU6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJ0aXRsZSIgbmFtZT0idGl0bGUiIHJlcXVpcmVkIC8+CgogICAgICA8bGFiZWwgaHRtbEZvcj0iY29udGVudCI+Q29udGVudDo8L2xhYmVsPgogICAgICA8dGV4dGFyZWEgaWQ9ImNvbnRlbnQiIG5hbWU9ImNvbnRlbnQiIHJlcXVpcmVkIC8+CgogICAgICA8U3VibWl0QnV0dG9uIC8+CiAgICA8L2Zvcm0+CiAgKQp9Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>در این مثال:</p>

<ul>
  <li>اکشن <code>createPost</code> از فایل <code>../actions</code> وارد شده است.</li>
  <li>پراپ <code>action</code> عنصر <code><form></code> روی تابع <code>createPost</code> تنظیم شده است.</li>
  <li>کامپوننت <code>SubmitButton</code> از هوک <code>useFormStatus</code> برای تعیین اینکه آیا فرم در حال حاضر در حال ارسال است یا نه، استفاده می‌کند. این کامپوننت دکمه را در حین ارسال فرم غیرفعال می‌کند تا از ارسال‌های متعدد جلوگیری کند.</li>
</ul>

<h3>مدیریت داده‌های فرم</h3>

<p>اکشن‌های سرور به طور خودکار داده‌های فرم را به عنوان یک شیء <code>FormData</code> دریافت می‌کنند. شما می‌توانید با استفاده از متد <code>get</code> شیء <code>FormData</code> به داده‌ها دسترسی پیدا کنید. در اینجا یک مثال آورده شده است:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // ...
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIGNvbnN0IHRpdGxlID0gZm9ybURhdGEuZ2V0KCd0aXRsZScpCiAgY29uc3QgY29udGVudCA9IGZvcm1EYXRhLmdldCgnY29udGVudCcpCgogIC8vIC4uLgp9Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>در این مثال، <code>title</code> و <code>content</code> از شیء <code>formData</code> با استفاده از متد <code>get</code> استخراج می‌شوند.</p>

<h3>ارائه بازخورد به کاربر</h3>

<p>شما می‌توانید با برگرداندن یک مقدار از اکشن سرور، به کاربر بازخورد دهید. این مقدار برای کامپوننتی که اکشن را فراخوانی کرده در دسترس خواهد بود. شما می‌توانید از این مقدار برای نمایش پیام‌های موفقیت یا خطا به کاربر استفاده کنید. در اینجا یک مثال آورده شده است:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  // ...

  return { message: 'Post created successfully!' }
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIC8vIC4uLgoKICByZXR1cm4geyBtZXNzYWdlOiAnUG9zdCBjcmVhdGVkIHN1Y2Nlc3NmdWxseSEnIH0KfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/components/PostForm.js
'use client'

import { useState } from 'react'
import { createPost } from '../actions'

export default function PostForm() {
  const [message, setMessage] = useState(null)

  async function handleSubmit(formData) {
    const result = await createPost(formData)
    setMessage(result.message)
  }

  return (
    <div>
      <form action={handleSubmit}>
        {/* ... */}
      </form>
      {message && <p>{message}</p>}
    </div>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKJ3VzZSBjbGllbnQnCgppbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JwppbXBvcnQgeyBjcmVhdGVQb3N0IH0gZnJvbSAnLi4vYWN0aW9ucycKCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIFBvc3RGb3JtKCkgewogIGNvbnN0IFttZXNzYWdlLCBzZXRNZXNzYWdlXSA9IHVzZVN0YXRlKG51bGwpCgogIGFzeW5jIGZ1bmN0aW9uIGhhbmRsZVN1Ym1pdChmb3JtRGF0YSkgewogICAgY29uc3QgcmVzdWx0ID0gYXdhaXQgY3JlYXRlUG9zdChmb3JtRGF0YSkKICAgIHNldE1lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgfQoKICByZXR1cm4gKAogICAgPGRpdj4KICAgICAgPGZvcm0gYWN0aW9uPXtoYW5kbGVTdWJtaXR9PgogICAgICAgIHsvKiAuLi4gKi99CiAgICAgIDwvZm9ybT4KICAgICAge21lc3NhZ2UgJiYgPHA+e21lc3NhZ2V9PC9wPn0KICAgIDwvZGl2PgogICkKfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>در این مثال:</p>

<ul>
  <li>اکشن <code>createPost</code> یک شیء با ویژگی <code>message</code> برمی‌گرداند.</li>
  <li>کامپوننت <code>PostForm</code> از هوک <code>useState</code> برای ذخیره پیام استفاده می‌کند.</li>
  <li>تابع <code>handleSubmit</code> اکشن <code>createPost</code> را فراخوانی کرده و استیت پیام را با مقداری که توسط اکشن برگردانده شده، تنظیم می‌کند.</li>
  <li>پیام در یک عنصر <code><p></code> به کاربر نمایش داده می‌شود.</li>
</ul>

<h3>مدیریت خطا</h3>

<p>اکشن‌های سرور می‌توانند خطا پرتاب کنند که توسط رانتایم ری‌اکت گرفته می‌شود. شما می‌توانید این خطاها را در کامپوننت‌های خود با استفاده از یک بلوک <code>try...catch</code> مدیریت کنید. در اینجا یک مثال آورده شده است:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  // ...

  if (!title || title.length < 5) {
    throw new Error('Title must be at least 5 characters long.')
  }

  return { message: 'Post created successfully!' }
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIC8vIC4uLgoKICBpZiAoIXRpdGxlIHx8IHRpdGxlLmxlbmd0aCA8IDUpIHsKICAgIHRocm93IG5ldyBFcnJvcignVGl0bGUgbXVzdCBiZSBhdCBsZWFzdCA1IGNoYXJhY3RlcnMgbG9uZy4nKQogIH0KCiAgcmV0dXJuIHsgbWVzc2FnZTogJ1Bvc3QgY3JlYXRlZCBzdWNjZXNzZnVsbHkhJyB9Cn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/components/PostForm.js
'use client'

import { useState } from 'react'
import { createPost } from '../actions'

export default function PostForm() {
  const [message, setMessage] = useState(null)
  const [error, setError] = useState(null)

  async function handleSubmit(formData) {
    try {
      const result = await createPost(formData)
      setMessage(result.message)
      setError(null)
    } catch (e) {
      setError(e.message)
      setMessage(null)
    }
  }

  return (
    <div>
      <form action={handleSubmit}>
        {/* ... */}
      </form>
      {message && <p>{message}</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKJ3VzZSBjbGllbnQnCgppbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JwppbXBvcnQgeyBjcmVhdGVQb3N0IH0gZnJvbSAnLi4vYWN0aW9ucycKCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIFBvc3RGb3JtKCkgewogIGNvbnN0IFttZXNzYWdlLCBzZXRNZXNzYWdlXSA9IHVzZVN0YXRlKG51bGwpCiAgY29uc3QgW2Vycm9yLCBzZXRFcnJvcl0gPSB1c2VTdGF0ZShudWxsKQoKICBhc3luYyBmdW5jdGlvbiBoYW5kbGVTdWJtaXQoZm9ybURhdGEpIHsKICAgIHRyeSB7CiAgICAgIGNvbnN0IHJlc3VsdCA9IGF3YWl0IGNyZWF0ZVBvc3QoZm9ybURhdGEpCiAgICAgIHNldE1lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgICAgIHNldEVycm9yKG51bGwpCiAgICB9IGNhdGNoIChlKSB7CiAgICAgIHNldEVycm9yKGUubWVzc2FnZSkKICAgICAgc2V0TWVzc2FnZShudWxsKQogICAgfQogIH0KCiAgcmV0dXJuICgKICAgIDxkaXY+CiAgICAgIDxmb3JtIGFjdGlvbj17aGFuZGxlU3VibWl0fT4KICAgICAgICB7LyogLi4uICovfQogICAgICA8L2Zvcm0+CiAgICAgIHttZXNzYWdlICYmIDxwPnttZXNzYWdlfTwvcD59CiAgICAgIHtlcnJvciAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+e2Vycm9yfTwvcD59CiAgICA8L2Rpdj4KICApCn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>در این مثال:</p>

<ul>
  <li>اکشن <code>createPost</code> در صورتی که عنوان کمتر از ۵ کاراکتر داشته باشد، یک خطا پرتاب می‌کند.</li>
  <li>کامپوننت <code>PostForm</code> از یک بلوک <code>try...catch</code> برای گرفتن هر خطایی که توسط اکشن <code>createPost</code> پرتاب شود، استفاده می‌کند.</li>
  <li>اگر خطایی گرفته شود، پیام خطا در یک عنصر <code><p></code> با متن قرمز به کاربر نمایش داده می‌شود.</li>
</ul>

<h2>بهترین شیوه‌ها برای استفاده از اکشن‌های سرور ری‌اکت</h2>

<p>برای اطمینان از اینکه از اکشن‌های سرور به طور مؤثر استفاده می‌کنید، بهترین شیوه‌های زیر را در نظر بگیرید:</p>

<h3>از دستورالعمل <code>'use server'</code> استفاده کنید</h3>

<p>همیشه دستورالعمل <code>'use server'</code> را در بالای فایل‌های اکشن سرور خود قرار دهید. این دستورالعمل به کامپایلر ری‌اکت می‌گوید که توابع موجود در فایل باید روی سرور اجرا شوند. این برای امنیت و عملکرد حیاتی است.</p>

<h3>اکشن‌ها را کوچک و متمرکز نگه دارید</h3>

<p>هر اکشن سرور باید یک وظیفه واحد و به خوبی تعریف شده را انجام دهد. این باعث می‌شود اکشن‌های شما برای درک، تست و نگهداری آسان‌تر شوند. از ایجاد اکشن‌های بزرگ و یکپارچه که چندین وظیفه نامرتبط را انجام می‌دهند، خودداری کنید.</p>

<h3>داده‌ها را در سرور اعتبارسنجی کنید</h3>

<p>همیشه داده‌ها را قبل از انجام هرگونه عملیاتی در سرور اعتبارسنجی کنید. این کار اپلیکیشن شما را از داده‌های نامعتبر یا مخرب محافظت می‌کند. از تکنیک‌های اعتبارسنجی مناسب مانند اعتبارسنجی نوع داده، بررسی طول و عبارات منظم استفاده کنید. اعتبارسنجی سمت سرور امن‌تر از اعتبارسنجی سمت کلاینت است که می‌توان آن را دور زد.</p>

<h3>خطاها را به درستی مدیریت کنید</h3>

<p>همیشه خطاها را در اکشن‌های سرور خود به درستی مدیریت کنید. این کار از کرش کردن اپلیکیشن شما جلوگیری کرده و تجربه کاربری بهتری را فراهم می‌کند. از بلوک‌های <code>try...catch</code> برای گرفتن هر استثنایی که ممکن است رخ دهد و ارائه پیام‌های خطای آموزنده به کاربر استفاده کنید.</p>

<h3>از به‌روزرسانی‌های خوش‌بینانه استفاده کنید</h3>

<p>از به‌روزرسانی‌های خوش‌بینانه برای بهبود پاسخگویی درک شده اپلیکیشن خود استفاده کنید. بلافاصله رابط کاربری را به‌روزرسانی کنید تا نتیجه مورد انتظار یک اکشن را منعکس کند، حتی قبل از اینکه سرور تغییر را تأیید کند. اگر عملیات سمت سرور با شکست مواجه شود، می‌توانید به راحتی رابط کاربری را به حالت قبلی خود بازگردانید.</p>

<h3>کشینگ را در نظر بگیرید</h3>

<p>برای بهبود عملکرد، کش کردن نتایج اکشن‌های سرور را در نظر بگیرید. این می‌تواند به ویژه برای اکشن‌هایی که عملیات پرهزینه انجام می‌دهند یا به طور مکرر فراخوانی می‌شوند، مفید باشد. از استراتژی‌های کشینگ مناسب مانند کشینگ HTTP یا کشینگ سمت سرور برای کاهش بار روی سرور خود استفاده کنید.</p>

<h3>اکشن‌های سرور خود را ایمن کنید</h3>

<p>اقدامات امنیتی را برای محافظت از اکشن‌های سرور خود در برابر دسترسی و دستکاری غیرمجاز پیاده‌سازی کنید. از احراز هویت و مجوزدهی برای اطمینان از اینکه فقط کاربران مجاز می‌توانند اکشن‌های خاصی را انجام دهند، استفاده کنید. در برابر آسیب‌پذیری‌های امنیتی رایج مانند cross-site scripting (XSS) و SQL injection محافظت کنید. همیشه ورودی کاربر را قبل از استفاده در کوئری‌های پایگاه داده یا سایر عملیات حساس، پاکسازی (sanitize) کنید.</p>

<h2>موارد استفاده رایج برای اکشن‌های سرور ری‌اکت</h2>

<p>اکشن‌های سرور برای موارد استفاده متنوعی مناسب هستند، از جمله:</p>

<h3>ارسال فرم‌ها</h3>

<p>مدیریت ارسال فرم‌ها یکی از رایج‌ترین موارد استفاده برای اکشن‌های سرور است. شما می‌توانید از اکشن‌های سرور برای پردازش داده‌های فرم، اعتبارسنجی ورودی و ذخیره داده‌ها در پایگاه داده استفاده کنید. این کار نیاز به API endpointهای جداگانه را از بین برده و گردش کار توسعه شما را ساده می‌کند. به عنوان مثال، مدیریت ثبت‌نام کاربر، فرم‌های تماس یا نظرات محصول.</p>

<h3>تغییر داده‌ها (Data Mutations)</h3>

<p>اکشن‌های سرور می‌توانند برای انجام تغییرات داده، مانند ایجاد، به‌روزرسانی یا حذف داده‌ها در پایگاه داده استفاده شوند. این به شما امکان می‌دهد تا داده‌های اپلیکیشن خود را در پاسخ به اقدامات کاربر به‌روزرسانی کنید. نمونه‌ها شامل به‌روزرسانی پروفایل کاربر، افزودن نظرات یا حذف پست‌ها می‌شود.</p>

<h3>احراز هویت و مجوزدهی</h3>

<p>اکشن‌های سرور می‌توانند برای مدیریت احراز هویت و مجوزدهی استفاده شوند. شما می‌توانید از اکشن‌های سرور برای تأیید اعتبارنامه‌های کاربر، صدور توکن‌ها و محافظت از منابع حساس استفاده کنید. این تضمین می‌کند که فقط کاربران مجاز می‌توانند به بخش‌های خاصی از اپلیکیشن شما دسترسی داشته باشند. به عنوان مثال، پیاده‌سازی قابلیت‌های ورود/خروج، مدیریت نقش‌های کاربری یا مجوزدهی دسترسی به ویژگی‌های خاص.</p>

<h3>به‌روزرسانی‌های لحظه‌ای (Real-time)</h3>

<p>در حالی که اکشن‌های سرور به طور ذاتی لحظه‌ای نیستند، می‌توانند با فناوری‌های دیگر مانند WebSockets ترکیب شوند تا به‌روزرسانی‌های لحظه‌ای را برای اپلیکیشن شما فراهم کنند. شما می‌توانید از اکشن‌های سرور برای فعال کردن رویدادهایی استفاده کنید که سپس از طریق WebSockets به کلاینت‌های متصل پخش می‌شوند. به اپلیکیشن‌های چت زنده، ویرایش اسناد مشترک یا داشبوردهای لحظه‌ای فکر کنید.</p>

<h2>ملاحظات بین‌المللی‌سازی (i18n)</h2>

<p>هنگام توسعه اپلیکیشن‌ها با اکشن‌های سرور برای مخاطبان جهانی، بین‌المللی‌سازی (i18n) بسیار مهم است. در اینجا برخی ملاحظات کلیدی آورده شده است:</p>

<h3>محلی‌سازی پیام‌های خطا</h3>

<p>اطمینان حاصل کنید که پیام‌های خطای بازگشتی توسط اکشن‌های سرور به زبان ترجیحی کاربر محلی‌سازی شده‌اند. این تجربه کاربری بهتری را فراهم می‌کند و درک و حل هرگونه مشکل را برای کاربران آسان‌تر می‌کند. از کتابخانه‌های i18n برای مدیریت ترجمه‌ها و نمایش پویا پیام‌ها بر اساس محلی (locale) کاربر استفاده کنید.</p>

<h3>قالب‌بندی تاریخ و اعداد</h3>

<p>تاریخ‌ها و اعداد را مطابق با محلی کاربر قالب‌بندی کنید. محلی‌های مختلف قراردادهای متفاوتی برای نمایش تاریخ، اعداد و ارزها دارند. از کتابخانه‌های i18n برای قالب‌بندی صحیح این مقادیر بر اساس محلی کاربر استفاده کنید.</p>

<h3>مدیریت مناطق زمانی</h3>

<p>هنگام کار با تاریخ و زمان، به مناطق زمانی توجه داشته باشید. تاریخ و زمان را در فرمت UTC ذخیره کرده و هنگام نمایش، آن‌ها را به منطقه زمانی محلی کاربر تبدیل کنید. این تضمین می‌کند که تاریخ و زمان بدون توجه به موقعیت مکانی کاربر به درستی نمایش داده شوند. به عنوان مثال، زمان‌بندی رویدادها یا نمایش مهرهای زمانی.</p>

<h3>تبدیل ارز</h3>

<p>اگر اپلیکیشن شما با ارزها سروکار دارد، قابلیت تبدیل ارز را فراهم کنید. به کاربران اجازه دهید قیمت‌ها را به ارز محلی خود مشاهده کنند. از یک API تبدیل ارز معتبر برای اطمینان از به‌روز بودن نرخ‌های ارز استفاده کنید. این به ویژه برای اپلیکیشن‌های تجارت الکترونیک و خدمات مالی مهم است.</p>

<h3>پشتیبانی از راست-به-چپ (RTL)</h3>

<p>اگر اپلیکیشن شما از زبان‌هایی که از راست به چپ (RTL) نوشته می‌شوند، مانند عربی یا عبری، پشتیبانی می‌کند، اطمینان حاصل کنید که رابط کاربری شما برای این زبان‌ها به درستی آینه‌ای شده است. این شامل آینه‌ای کردن چیدمان، جهت متن و آیکون‌ها می‌شود. از ویژگی‌های منطقی CSS برای ایجاد چیدمان‌هایی که با جهت‌های مختلف متن سازگار هستند، استفاده کنید.</p>

<h2>نمونه‌هایی از اکشن‌های سرور ری‌اکت در اپلیکیشن‌های جهانی</h2>

<p>در اینجا چند نمونه از نحوه استفاده از اکشن‌های سرور ری‌اکت در اپلیکیشن‌های جهانی آورده شده است:</p>

<h3>پلتفرم تجارت الکترونیک</h3>

<ul>
  <li><b>افزودن محصول به سبد خرید:</b> یک اکشن سرور می‌تواند برای افزودن محصول به سبد خرید کاربر استفاده شود. این اکشن می‌تواند شناسه محصول را اعتبارسنجی کند، سطح موجودی را بررسی کند و سبد خرید را در پایگاه داده به‌روزرسانی کند.</li>
  <li><b>پردازش سفارش:</b> یک اکشن سرور می‌تواند برای پردازش سفارش استفاده شود. این اکشن می‌تواند اطلاعات پرداخت کاربر را اعتبارسنجی کند، هزینه‌های حمل و نقل را محاسبه کند و یک سفارش در پایگاه داده ایجاد کند.</li>
  <li><b>عضویت در خبرنامه:</b> یک اکشن سرور می‌تواند عضویت در خبرنامه را مدیریت کند، آدرس‌های ایمیل را اعتبارسنجی کرده و آنها را به لیست اشتراک اضافه کند.</li>
</ul>

<h3>پلتفرم رسانه اجتماعی</h3>

<ul>
  <li><b>ارسال نظر:</b> یک اکشن سرور می‌تواند برای ارسال نظر روی یک پست استفاده شود. این اکشن می‌تواند متن نظر را اعتبارسنجی کند، آن را با پست مرتبط کند و آن را در پایگاه داده ذخیره کند.</li>
  <li><b>پسندیدن یک پست:</b> یک اکشن سرور می‌تواند برای پسندیدن یک پست استفاده شود. این اکشن می‌تواند تعداد لایک‌های پست را به‌روزرسانی کند و لایک را در پایگاه داده ذخیره کند.</li>
  <li><b>دنبال کردن یک کاربر:</b> اکشن‌های سرور می‌توانند درخواست‌های دنبال کردن را مدیریت کنند، مسدود کردن کاربر را انجام دهند و تعداد دنبال‌کنندگان را به‌روزرسانی کنند.</li>
</ul>

<h3>اپلیکیشن رزرو سفر</h3>

<ul>
  <li><b>جستجوی پروازها:</b> اکشن‌های سرور می‌توانند برای جستجوی موجودی پروازها بر اساس مقصد و تاریخ استفاده شوند. این اکشن می‌تواند API‌های خارجی را فراخوانی کند، نتایج را فیلتر کند و گزینه‌ها را به کاربر ارائه دهد.</li>
  <li><b>رزرو اتاق هتل:</b> اکشن‌های سرور می‌توانند رزرو هتل را مدیریت کنند، موجودی اتاق را تأیید کرده و جزئیات پرداخت را پردازش کنند.</li>
  <li><b>بررسی مقاصد سفر:</b> یک اکشن سرور می‌تواند افزودن و پردازش نظرات و امتیازات کاربران را مدیریت کند.</li>
</ul>

<h2>کامپوننت‌های سرور ری‌اکت در مقابل اکشن‌های سرور</h2>

<p>درک تفاوت بین کامپوننت‌های سرور ری‌اکت و اکشن‌های سرور مهم است، زیرا آنها اغلب با هم کار می‌کنند اما اهداف متفاوتی دارند:</p>

<h3>کامپوننت‌های سرور ری‌اکت (React Server Components)</h3>

<p>کامپوننت‌های سرور ری‌اکت، کامپوننت‌هایی هستند که در سرور رندر می‌شوند. آنها به شما امکان می‌دهند داده‌ها را واکشی کنید، منطق را اجرا کنید و عناصر رابط کاربری را در سرور رندر کنید، که می‌تواند عملکرد را بهبود بخشد و میزان جاوااسکریپتی که باید در کلاینت دانلود و اجرا شود را کاهش دهد. کامپوننت‌های سرور عمدتاً برای رندر کردن رابط کاربری و واکشی داده‌های اولیه هستند.</p>

<h3>اکشن‌های سرور (Server Actions)</h3>

<p>اکشن‌های سرور توابع ناهمگامی هستند که در پاسخ به تعاملات کاربر، مانند ارسال فرم، در سرور اجرا می‌شوند. آنها عمدتاً برای مدیریت تغییرات داده، اجرای منطق سمت سرور و ارائه بازخورد به کاربر هستند. اکشن‌های سرور از کامپوننت‌های کلاینت، معمولاً در پاسخ به ارسال فرم یا سایر رویدادهای کاربر، فراخوانی می‌شوند.</p>

<p><b>تفاوت‌های کلیدی:</b></p>

<ul>
  <li><b>هدف:</b> کامپوننت‌های سرور برای رندر کردن رابط کاربری هستند، در حالی که اکشن‌های سرور برای مدیریت تغییرات داده هستند.</li>
  <li><b>اجرا:</b> کامپوننت‌های سرور در حین بارگذاری اولیه صفحه در سرور رندر می‌شوند، در حالی که اکشن‌های سرور از کامپوننت‌های کلاینت در پاسخ به تعاملات کاربر فراخوانی می‌شوند.</li>
  <li><b>جریان داده:</b> کامپوننت‌های سرور می‌توانند داده‌ها را مستقیماً از سرور واکشی کنند، در حالی که اکشن‌های سرور داده‌ها را از کلاینت از طریق ارسال فرم یا سایر رویدادهای کاربر دریافت می‌کنند.</li>
</ul>

<p><b>چگونه با هم کار می‌کنند:</b></p>

<p>کامپوننت‌های سرور و اکشن‌های سرور می‌توانند برای ساخت اپلیکیشن‌های وب تعاملی با هم استفاده شوند. کامپوننت‌های سرور می‌توانند رابط کاربری اولیه را رندر کرده و داده‌های اولیه را واکشی کنند، در حالی که اکشن‌های سرور می‌توانند تغییرات داده را مدیریت کرده و به کاربر بازخورد دهند. به عنوان مثال، یک کامپوننت سرور می‌تواند یک فرم را رندر کند و یک اکشن سرور می‌تواند ارسال فرم را مدیریت کرده و داده‌ها را در پایگاه داده به‌روزرسانی کند.</p>

<h2>نتیجه‌گیری</h2>

<p>اکشن‌های سرور ری‌اکت یک راه قدرتمند و کارآمد برای مدیریت پردازش فرم، تغییرات داده و سایر عملیات سمت سرور در اپلیکیشن‌های ری‌اکت شما ارائه می‌دهند. با بهره‌گیری از اکشن‌های سرور، می‌توانید گردش کار توسعه خود را ساده کنید، عملکرد اپلیکیشن را بهبود بخشید، امنیت را تقویت کنید و تجربه کاربری بهتری را فراهم کنید. همانطور که اپلیکیشن‌های وب پیچیده‌تری می‌سازید، درک و استفاده از اکشن‌های سرور ری‌اکت به یک مهارت ضروری برای توسعه‌دهندگان مدرن ری‌اکت تبدیل خواهد شد.</p>

<p>به یاد داشته باشید که بهترین شیوه‌های ذکر شده در این راهنما را دنبال کنید تا اطمینان حاصل کنید که از اکشن‌های سرور به طور مؤثر و ایمن استفاده می‌کنید. با پذیرش اکشن‌های سرور، می‌توانید پتانسیل کامل ری‌اکت را آزاد کرده و اپلیکیشن‌های وب با عملکرد بالا و کاربرپسند برای مخاطبان جهانی بسازید.</p>
</div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">اکشن‌های سرور ری‌اکت</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">کامپوننت‌های سرور</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">پردازش فرم</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">رندرینگ سمت سرور</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">تغییر داده‌ها</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">فریمورک ری‌اکت</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">توسعه وب</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">واکشی داده</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">یکپارچه‌سازی سرور</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">بهبود تدریجی</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div style="display:none" id="S:3"></div><script>$RC("B:3","S:3")</script><div style="display:none" id="S:0"><template id="P:4"></template><template id="P:5"></template><template id="P:6"></template><template id="P:7"></template><template id="P:8"></template><template id="P:9"></template><template id="P:a"></template><template id="P:b"></template><template id="P:c"></template><template id="P:d"></template><template id="P:e"></template><template id="P:f"></template><template id="P:10"></template><template id="P:11"></template><template id="P:12"></template><template id="P:13"></template><template id="P:14"></template><template id="P:15"></template><template id="P:16"></template><template id="P:17"></template><template id="P:18"></template><template id="P:19"></template><template id="P:1a"></template><template id="P:1b"></template><template id="P:1c"></template><template id="P:1d"></template><template id="P:1e"></template><template id="P:1f"></template><template id="P:20"></template><template id="P:21"></template><template id="P:22"></template><template id="P:23"></template><template id="P:24"></template><template id="P:25"></template><template id="P:26"></template><template id="P:27"></template><template id="P:28"></template><template id="P:29"></template><template id="P:2a"></template><template id="P:2b"></template><template id="P:2c"></template><template id="P:2d"></template><template id="P:2e"></template><template id="P:2f"></template><template id="P:30"></template><template id="P:31"></template><template id="P:32"></template><template id="P:33"></template><template id="P:34"></template><template id="P:35"></template><template id="P:36"></template><template id="P:37"></template><template id="P:38"></template><template id="P:39"></template><template id="P:3a"></template><template id="P:3b"></template><template id="P:3c"></template><template id="P:3d"></template><template id="P:3e"></template><template id="P:3f"></template><template id="P:40"></template><template id="P:41"></template><template id="P:42"></template><template id="P:43"></template><template id="P:44"></template><template id="P:45"></template><template id="P:46"></template><template id="P:47"></template><template id="P:48"></template></div><link rel="alternate" hrefLang="ja" href="https://mlog.uz/ja/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ko" href="https://mlog.uz/ko/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ar" href="https://mlog.uz/ar/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="hi" href="https://mlog.uz/hi/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="tr" href="https://mlog.uz/tr/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="nl" href="https://mlog.uz/nl/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="pl" href="https://mlog.uz/pl/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="sv" href="https://mlog.uz/sv/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="no" href="https://mlog.uz/no/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="da" href="https://mlog.uz/da/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="fi" href="https://mlog.uz/fi/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="cs" href="https://mlog.uz/cs/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="hu" href="https://mlog.uz/hu/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ro" href="https://mlog.uz/ro/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="bg" href="https://mlog.uz/bg/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="hr" href="https://mlog.uz/hr/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="sk" href="https://mlog.uz/sk/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="sl" href="https://mlog.uz/sl/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="et" href="https://mlog.uz/et/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="lv" href="https://mlog.uz/lv/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="lt" href="https://mlog.uz/lt/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="el" href="https://mlog.uz/el/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="he" href="https://mlog.uz/he/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="th" href="https://mlog.uz/th/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="vi" href="https://mlog.uz/vi/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="id" href="https://mlog.uz/id/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="bn" href="https://mlog.uz/bn/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="uk" href="https://mlog.uz/uk/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="uz" href="https://mlog.uz/uz/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="fa" href="https://mlog.uz/fa/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="gu" href="https://mlog.uz/gu/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="kn" href="https://mlog.uz/kn/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ml" href="https://mlog.uz/ml/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="mr" href="https://mlog.uz/mr/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ta" href="https://mlog.uz/ta/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="te" href="https://mlog.uz/te/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="x-default" href="https://mlog.uz/en/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><meta name="format-detection" content="telephone=no, address=no, email=no"/><meta name="google-site-verification" content="your-google-verification-code"/><meta name="yandex-verification" content="your-yandex-verification-code"/><meta property="og:title" content="اکشن‌های سرور ری‌اکت (React Server Actions): راهنمای جامع پردازش فرم و یکپارچه‌سازی با سرور"/><meta property="og:description" content="قدرت اکشن‌های سرور ری‌اکت را برای پردازش یکپارچه فرم و تغییر داده‌ها در سمت سرور آزاد کنید. بیاموزید چگونه اپلیکیشن‌های وب کارآمد، امن و کاربرپسند بسازید."/><meta property="og:url" content="https://mlog.uz/fa/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><meta property="og:site_name" content="MLOG - Blog Platform"/><meta property="og:locale" content="fa"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2025-08-30T07:51:25.864Z"/><meta property="article:modified_time" content="2025-08-30T07:51:25.864Z"/><meta property="article:author" content="MEZES"/><meta property="article:tag" content="اکشن‌های سرور ری‌اکت"/><meta property="article:tag" content="کامپوننت‌های سرور"/><meta property="article:tag" content="پردازش فرم"/><meta property="article:tag" content="رندرینگ سمت سرور"/><meta property="article:tag" content="تغییر داده‌ها"/><meta property="article:tag" content="فریمورک ری‌اکت"/><meta property="article:tag" content="توسعه وب"/><meta property="article:tag" content="واکشی داده"/><meta property="article:tag" content="یکپارچه‌سازی سرور"/><meta property="article:tag" content="بهبود تدریجی"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="mlog.uz"/><meta name="twitter:creator" content="MEZES"/><meta name="twitter:title" content="اکشن‌های سرور ری‌اکت (React Server Actions): راهنمای جامع پردازش فرم و یکپارچه‌سازی با سرور"/><meta name="twitter:description" content="قدرت اکشن‌های سرور ری‌اکت را برای پردازش یکپارچه فرم و تغییر داده‌ها در سمت سرور آزاد کنید. بیاموزید چگونه اپلیکیشن‌های وب کارآمد، امن و کاربرپسند بسازید."/><meta name="twitter:image" content="https://mlog.uz/images/mlog.jpg"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="32x32"/><link rel="icon" href="/images/mlog-192.png"/><link rel="apple-touch-icon" href="/images/mlog-192.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div hidden id="S:4"></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"></div><script>$RS("S:5","P:5")</script><div hidden id="S:6"></div><script>$RS("S:6","P:6")</script><div hidden id="S:7"></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"></div><script>$RS("S:a","P:a")</script><div hidden id="S:b"></div><script>$RS("S:b","P:b")</script><div hidden id="S:c"></div><script>$RS("S:c","P:c")</script><div hidden id="S:d"></div><script>$RS("S:d","P:d")</script><div hidden id="S:e"></div><script>$RS("S:e","P:e")</script><div hidden id="S:f"></div><script>$RS("S:f","P:f")</script><div hidden id="S:10"></div><script>$RS("S:10","P:10")</script><div hidden id="S:11"></div><script>$RS("S:11","P:11")</script><div hidden id="S:12"></div><script>$RS("S:12","P:12")</script><div hidden id="S:13"></div><script>$RS("S:13","P:13")</script><div hidden id="S:14"></div><script>$RS("S:14","P:14")</script><div hidden id="S:15"></div><script>$RS("S:15","P:15")</script><div hidden id="S:16"></div><script>$RS("S:16","P:16")</script><div hidden id="S:17"></div><script>$RS("S:17","P:17")</script><div hidden id="S:18"></div><script>$RS("S:18","P:18")</script><div hidden id="S:19"></div><script>$RS("S:19","P:19")</script><div hidden id="S:1a"></div><script>$RS("S:1a","P:1a")</script><div hidden id="S:1b"></div><script>$RS("S:1b","P:1b")</script><div hidden id="S:1c"></div><script>$RS("S:1c","P:1c")</script><div hidden id="S:1d"></div><script>$RS("S:1d","P:1d")</script><div hidden id="S:1e"></div><script>$RS("S:1e","P:1e")</script><div hidden id="S:1f"></div><script>$RS("S:1f","P:1f")</script><div hidden id="S:20"></div><script>$RS("S:20","P:20")</script><div hidden id="S:21"></div><script>$RS("S:21","P:21")</script><div hidden id="S:22"></div><script>$RS("S:22","P:22")</script><div hidden id="S:23"></div><script>$RS("S:23","P:23")</script><div hidden id="S:24"></div><script>$RS("S:24","P:24")</script><div hidden id="S:25"></div><script>$RS("S:25","P:25")</script><div hidden id="S:26"></div><script>$RS("S:26","P:26")</script><div hidden id="S:27"></div><script>$RS("S:27","P:27")</script><div hidden id="S:28"></div><script>$RS("S:28","P:28")</script><div hidden id="S:29"></div><script>$RS("S:29","P:29")</script><div hidden id="S:2a"></div><script>$RS("S:2a","P:2a")</script><div hidden id="S:2b"></div><script>$RS("S:2b","P:2b")</script><div hidden id="S:2c"></div><script>$RS("S:2c","P:2c")</script><div hidden id="S:2d"></div><script>$RS("S:2d","P:2d")</script><div hidden id="S:2e"></div><script>$RS("S:2e","P:2e")</script><div hidden id="S:2f"></div><script>$RS("S:2f","P:2f")</script><div hidden id="S:30"></div><script>$RS("S:30","P:30")</script><div hidden id="S:31"></div><script>$RS("S:31","P:31")</script><div hidden id="S:32"></div><script>$RS("S:32","P:32")</script><div hidden id="S:33"></div><script>$RS("S:33","P:33")</script><div hidden id="S:34"></div><script>$RS("S:34","P:34")</script><div hidden id="S:35"></div><script>$RS("S:35","P:35")</script><div hidden id="S:36"></div><script>$RS("S:36","P:36")</script><div hidden id="S:37"></div><script>$RS("S:37","P:37")</script><div hidden id="S:38"></div><script>$RS("S:38","P:38")</script><div hidden id="S:39"></div><script>$RS("S:39","P:39")</script><div hidden id="S:3a"></div><script>$RS("S:3a","P:3a")</script><div hidden id="S:3b"></div><script>$RS("S:3b","P:3b")</script><div hidden id="S:3c"></div><script>$RS("S:3c","P:3c")</script><div hidden id="S:3d"></div><script>$RS("S:3d","P:3d")</script><div hidden id="S:3e"></div><script>$RS("S:3e","P:3e")</script><div hidden id="S:3f"></div><script>$RS("S:3f","P:3f")</script><div hidden id="S:40"></div><script>$RS("S:40","P:40")</script><div hidden id="S:41"></div><script>$RS("S:41","P:41")</script><div hidden id="S:42"></div><script>$RS("S:42","P:42")</script><div hidden id="S:43"></div><script>$RS("S:43","P:43")</script><div hidden id="S:44"></div><script>$RS("S:44","P:44")</script><div hidden id="S:45"></div><script>$RS("S:45","P:45")</script><div hidden id="S:46"></div><script>$RS("S:46","P:46")</script><div hidden id="S:47"></div><script>$RS("S:47","P:47")</script><div hidden id="S:48"></div><script>$RS("S:48","P:48")</script><script>$RC("B:0","S:0")</script></body></html>